<!DOCTYPE html>
<html lang="zh-CN">

<!-- protect 保护设置页面 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/iview.css">
    <link rel="stylesheet" href="./css/other.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/iview.min.js"></script>
    <script src="./config.js" type="text/javascript"></script>
    <script src="./js/nept-websocket.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./css/notiflix-3.2.5.min.css">
    <script src="./js/notiflix-3.2.5.min.js"></script>

    <title>斗轮机无人值守系统-南环科技</title>

    <style>
        
    </style>
</head>

<body class="outer-container">
    <div id="app" class="inner-container">
        <div id="protects" style="width: 100%;height: 850px;background-image: url('./projects/assets/file/2025/0725/1/1/background-1.png')">
            <div style="width: 100%;float: left;" v-if="ultrasonicIsShow">
                <div class="secondTitle">超声波</div>
                <i-col v-for="(item,i) in ultrasonic" class="col" span="4"
                    style="text-align: center;margin-top: 2px;margin-left: 3%;">
                    <card :bordered="false" style="background-color: #3CB371;">
                        <div class="cardHead">{{item.Name}}</div>
                        <div style="height: 30px;width: 100%;line-height: 50px;">
                            <div :id="item.Buttons[0].Id" class="cardContent1 head1" @click="commitCMD(item.Buttons[0].CommandValue.split(',')[0],item.Buttons[0].CommandValue.split(',')[1],item.Name + item.Buttons[0].ButtonName)">{{item.Buttons[0].ButtonName}}</div>
                            <div :id="item.Buttons[1].Id" class="cardContent2" @click="commitCMD(item.Buttons[1].CommandValue.split(',')[0],item.Buttons[1].CommandValue.split(',')[1],item.Name + item.Buttons[1].ButtonName)">{{item.Buttons[1].ButtonName}}</div>
                        </div>
                    </card>
                </i-col>
            </div>
            <div style="width: 100%;float: left;" v-if="encoderIsShow">
                <div class="secondTitle">编码器</div>
                <i-col v-for="(item,i) in encoder" class="col" span="4"
                    style="text-align: center;margin-top: 2px;margin-left: 3%;">
                    <card :bordered="false" style="background-color: #3CB371;">
                        <div class="cardHead">{{item.Name}}</div>
                        <div style="height: 30px;width: 100%;line-height: 50px;">
                            <div :id="item.Buttons[0].Id" class="cardContent1 head1" @click="commitCMD(item.Buttons[0].CommandValue.split(',')[0],item.Buttons[0].CommandValue.split(',')[1],item.Name + item.Buttons[0].ButtonName)">{{item.Buttons[0].ButtonName}}</div>
                            <div :id="item.Buttons[1].Id" class="cardContent2" @click="commitCMD(item.Buttons[1].CommandValue.split(',')[0],item.Buttons[1].CommandValue.split(',')[1],item.Name + item.Buttons[1].ButtonName)">{{item.Buttons[1].ButtonName}}</div>
                        </div>
                    </card>
                </i-col>
            </div>
            <div style="width: 100%;float: left;" v-if="limitIsShow">
                <div class="secondTitle">限位</div>
                <i-col v-for="(item,i) in limit" class="col" span="4"
                    style="text-align: center;margin-top: 2px;margin-left: 3%;">
                    <card :bordered="false" style="background-color: #3CB371;">
                        <div class="cardHead">{{item.Name}}</div>
                        <div style="height: 30px;width: 100%;line-height: 50px;">
                            <div :id="item.Buttons[0].Id" class="cardContent1 head1" @click="commitCMD(item.Buttons[0].CommandValue.split(',')[0],item.Buttons[0].CommandValue.split(',')[1],item.Name + item.Buttons[0].ButtonName)">{{item.Buttons[0].ButtonName}}</div>
                            <div :id="item.Buttons[1].Id" class="cardContent2" @click="commitCMD(item.Buttons[1].CommandValue.split(',')[0],item.Buttons[1].CommandValue.split(',')[1],item.Name + item.Buttons[1].ButtonName)">{{item.Buttons[1].ButtonName}}</div>
                        </div>
                    </card>
                </i-col>
            </div>
            <div style="width: 100%;float: left;" v-if="allSwitchIsShow">
                <div class="secondTitle">总开关</div>
                <i-col v-for="(item,i) in allSwitch" class="col" span="4"
                    style="text-align: center;margin-top: 2px;margin-left: 3%;">
                    <card :bordered="false" style="background-color: #3CB371;">
                        <div class="cardHead">{{item.Name}}</div>
                        <div style="height: 30px;width: 100%;line-height: 50px;">
                            <div :id="item.Buttons[0].Id" class="cardContent1 head1" @click="commitCMD(item.Buttons[0].CommandValue.split(',')[0],item.Buttons[0].CommandValue.split(',')[1],item.Name + item.Buttons[0].ButtonName)">{{item.Buttons[0].ButtonName}}</div>
                            <div :id="item.Buttons[1].Id" class="cardContent2" @click="commitCMD(item.Buttons[1].CommandValue.split(',')[0],item.Buttons[1].CommandValue.split(',')[1],item.Name + item.Buttons[1].ButtonName)">{{item.Buttons[1].ButtonName}}</div>
                        </div>
                    </card>
                </i-col>
            </div>
        </div>
    </div>

    <script>
        // 更新页面
        function updateViewByHtml(jsData) {
            for (let item of jsData) {
                $("#" + item.I + "").css("background-color", item.C);
            }
        }

        // 接收保护设置页面数据
        function onReceiveProtectPage(data){
            if ((data != null) && (data != "")){
                let jsData = JSON.parse(data);
                updateViewByHtml(jsData.HTML);
            }
        }

        // 获取页面渲染内容
        function onGetPageRenderedContent(pageId) {
            let request = {};
            request.Function = "GetPageRenderedContent";
            request.PageId = pageId;
            sendPostMessage(g_CenterHttpUrl, request);
        }

        // 发送Post消息
        function sendPostMessage(serverUrl, request) {
            if (serverUrl == null) {
                return;
            }
            if (request == null) {
                return;
            }
            fetch(serverUrl, {
                method: 'post',
                body: JSON.stringify(request),
                headers: { 'Content-Type': 'application/json' }
            }).then((e) => {
                e.text().then(data => {
                    let jdata = JSON.parse(data);
                    if(jdata.Code == g_ResCodeSuccess) {
                        JSON.parse(jdata.Message).forEach(function (e,i) {
                            if (e.Name.indexOf("总") > -1){
                                vueMain.allSwitch.push(e);
                                vueMain.allSwitchIsShow = true;
                            }
                            else if(e.Name.indexOf("超声波") > -1){
                                vueMain.ultrasonic.push(e);
                                vueMain.ultrasonicIsShow = true;
                            }
                            else if(e.Name.indexOf("编码器") > -1){
                                vueMain.encoder.push(e);
                                vueMain.encoderIsShow = true;
                            }else if(e.Name.indexOf("限位") > -1){
                                vueMain.limit.push(e);
                                vueMain.limitIsShow = true;
                            }
                            i++;
                        })
                    }
                    else {
                        Notiflix.Notify.warning(jdata.Message);
                    }
                });
            });
        }
        let protectSettingMessage = "pid=" + g_PageID_Protect;
        let protectWS = new NeptWebSocket(
            g_CenterServerIp,
            g_CenterWebSocketPort,
            g_WebSocketMaxReconnectInterval,
            onReceiveProtectPage,
            protectSettingMessage
        );
        protectWS.tryCreate();

        let Main = {
            data() {
                return {
                    buttonSize: 'large',
                    ultrasonic: [],
                    encoder:[],
                    limit:[],
                    allSwitch: [],
                    limitIsShow:false,
                    ultrasonicIsShow:false,
                    encoderIsShow:false,
                    allSwitchIsShow: false
                }
            },

            methods: {
                getProtect() {
                    vueMain = this;
                    onGetPageRenderedContent('103');
                    
                },

                // 下发命令
                commitCMD(cmd, obj,optName){
                    // vueMain.submit(obj, cmd,optName);
                    let request = {};
                    request.Function = "CommitAuxiliary";
                    request.Cmd = cmd;
                    request.Obj = obj;
                    fetch(g_CenterHttpUrl, {
                        method: 'post',
                        body: JSON.stringify(request),
                        headers: { 'Content-Type': 'application/json' }
                    }).then((e) => {
                        e.text().then(data => {
                            let jdata = JSON.parse(data);
                            if(jdata.Code == g_ResCodeSuccess) {
                                Notiflix.Notify.success('成功');
                                // this.Success('成功');
                            }
                            else {
                                Notiflix.Notify.warning(jdata.Message);
                                // this.Warning(jdata.Message);
                            }
                        });
                    });
                },
                submit(cmd, obj,optName){
                    let myVue = this;
                    let requestParam = {
                        "cmdType": "PARAM_EXECUTE",
                        "Cmd": cmd,
                        "Obj": obj,
                        "OptName": optName
                    };

                    
                }
            },

            mounted() {
                this.getProtect();
            }
        }


        window.onload = function(){
            let Component = Vue.extend(Main);
            new Component().$mount('#app');
            // Notiflix.Notify.init({timeout: g_NotiflixTimeout});
        }

        window.onunload = function(){
            if (protectWS != null){
                protectWS.close();
            }
        }
    </script>
</body>

</html>